<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>Document</title>
	</head>
	<body>
		<hr>
		<div id="app">
			{{ message }}
		</div>
		<hr>
		<div id="app-2">
			<span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span>
		</div>
		<hr>
		<div id="app-3">
			<p v-if="seen">
				Now you see me
			</p>
		</div>
		<hr>
		<div id="app-4">
			<ol>
				<li v-for="todo in todos">
					{{ todo.text }}
				</li>
			</ol>
		</div>
		<hr>
		<div id="app-5">
			<p>
				{{ message }}
			</p>
			<button v-on:click="reverseMessage">
				Reverse Message
			</button>
		</div>
		<hr>
		<div id="app-6">
			<p>
				{{ message }}
			</p>
			<input v-model="message">
		</div>
		<hr>
		<div id="app-7">
			<ol>
				<!-- Now we provide each todo-item with the todo object    -->
				<!-- it's representing, so that its content can be dynamic -->
				<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
			</ol>
		</div>
		<div id="example">
			<p>
				Original message: "{{ message }}"
			</p>
			<p>
				Computed reversed message: "{{ reversedMessage }}"
			</p>
		</div>
	</body>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el : '#app',
			data : {
				message : 'Hello Vue!'
			}
		});

		var app2 = new Vue({
			el : '#app-2',
			data : {
				message : 'You loaded this page on ' + new Date()
			}
		});

		var app3 = new Vue({
			el : '#app-3',
			data : {
				seen : true
			}
		});

		var app4 = new Vue({
			el : '#app-4',
			data : {
				todos : [{
					text : 'Learn JavaScript'
				}, {
					text : 'Learn Vue'
				}, {
					text : 'Build something awesome'
				}]
			}
		});

		var app5 = new Vue({
			el : '#app-5',
			data : {
				message : 'Hello Vue.js!'
			},
			methods : {
				reverseMessage : function() {
					this.message = this.message.split('').reverse().join('');
				}
			}
		});

		var app6 = new Vue({
			el : '#app-6',
			data : {
				message : 'Hello Vue!'
			}
		});

		Vue.component('todo-item', {
			props : ['todo'],
			template : '<li>{{ todo.text }}</li>'
		});

		var app7 = new Vue({
			el : '#app-7',
			data : {
				groceryList : [{
					text : 'Vegetables'
				}, {
					text : 'Cheese'
				}, {
					text : 'Whatever else humans are supposed to eat'
				}]
			}
		});

		var vm = new Vue({
			el : '#example',
			data : {
				message : 'Hello'
			},
			computed : {
				// a computed getter
				reversedMessage : function() {
					// `this` points to the vm instance
					return this.message.split('').reverse().join('');
				}
			}
		});
	</script>
</html>
